<template>
    <div>
        <!-- <page-main> -->
        <!-- <h2>巡查记录</h2> -->
        <el-timeline>
            <el-timeline-item :timestamp="$getDateTime(info.add_time)" placement="top">
                <el-card>
                    <el-descriptions :column="2" :size="size" border>
                        <el-descriptions-item>
                            <template #label> 巡查人 </template>
                            {{ info.real_name || "" }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label> 隐患等级 </template>
                            {{ info.danger_level || "" }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label> 备注 </template>
                            {{ info.remark || "" }}
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label> 巡查图片 </template>
                            <el-image v-for="item in info.images" :key="item" :src="upDataUrl + item"
                                style="width: 100px; margin-left: 10px;" :preview-src-list="[upDataUrl + item]">
                            </el-image>
                            <span v-if="!info.images">暂无图片</span>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label> 巡查视频 </template>
                            <el-button @click="openVideo(item1)" v-show="info.video" size="mini" type="primary"
                                v-for="(item1, index1) in info.video" :key="index1">播放视频 {{ index1 + 1 }}</el-button>
                            <div v-show="info.video.length < 1">暂无视频</div>
                        </el-descriptions-item>
                        <el-descriptions-item>
                            <template #label> 巡查项详情 </template>
                            <div>
                                <div v-for="(item1,index) in info.question_text" :key="index"
                                    style="margin-bottom: 10px;">
                                    <div>{{index+1}}.{{item1.name||''}}</div>
                                    <div style="margin-left: 30px;">
                                        <div v-for="(twoItem,twoIndex) in item1.child" :key="twoIndex">
                                            <div>{{twoItem.name}}</div>
                                            <div style="margin-left: 30px;"
                                                v-for="(threeItem,threeIndex) in twoItem.child" :key="threeIndex"
                                                v-show="twoItem.value == threeItem.id">{{threeItem.name||''}}</div>
                                        </div>
                                    </div>
                                </div>
                                <div v-if="ruleType=='area'">
                                    <div v-for="(item1,index) in info.question_text" :key="index"
                                        style="margin-bottom: 40px;">
                                        <div>{{item1.name}}</div>
                                        <div v-for="(twoItem,twoIndex) in item1.child" :key="twoIndex"
                                            style="margin-bottom: 40px; margin-left: 20px;">
                                            <div style="margin-bottom: 20px;">{{twoIndex+1}}&ensp;{{twoItem.name}}</div>
                                            <div v-for="(threeItem,threeIndex) in twoItem.child" :key="threeIndex"
                                                style="margin-bottom: 40px; margin-left: 60px;">
                                                <div>{{threeIndex+1}}&ensp;{{threeItem.name}}</div>
                                                <div v-for="(foreItem,foreIndex) in threeItem.child"
                                                    v-show="foreItem.id == threeItem.value" :key="foreIndex">
                                                    {{foreItem.name}}</div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-descriptions-item>
                    </el-descriptions>
                </el-card>
            </el-timeline-item>
        </el-timeline>
        <!-- </page-main> -->
        <!-- 视频播放 -->
        <el-dialog title="检查视频" v-model="dialogVisibleVideo" width="30%" @close="playUrl = ''">
            <video width="320" height="240" controls="controls" v-if="playUrl">
                <source :src="playUrl" type="video/ogg" />
                <source :src="playUrl" type="video/mp4" />
                <source :src="playUrl" type="video/webm" />
                <object :data="playUrl" width="320" height="240"></object>
            </video>
        </el-dialog>
    </div>
</template>

<script>
export default {
    props: ["info"],
    data() {
        return {
            upDataUrl: import.meta.env.DEV ? "/proxy/" : import.meta.env.VITE_APP_API_BASEURL,
            dialogVisibleVideo: false
        }
    },
    methods: {
        openVideo(url) {
            this.playUrl = this.upDataUrl + url;
            this.dialogVisibleVideo = true;
        },
    },
}
</script>
<style lang="scss" scoped>
.block {
    display: flex;
    justify-content: center;
    align-items: center;
}
.labelTitle {
    background-color: #fafafa;
    color: #909399;
    font-weight: bold;
    padding: 17px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ebeef5;
}
.labelContent {
    padding: 17px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ebeef5;
    height: 57px;
}
</style>
